export default {
    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
    theme: {
        // 内边距
        padding: Array.from({ length: 1000 }).reduce((map: any, _, index) => {
            map[index] = `${index * 4}px`;
            return map;
        }, {}),
        // 外边距
        spacing: Array.from({ length: 1000 }).reduce((map: any, _, index) => {
            map[index] = `${index * 4}px`;
            return map;
        }, {}),

        extend: {
            //主要文字颜色
            textColor: {
                primary: "var(--color-text-primary)", // 主题文字色
                secondary: "var(--color-text-secondary)", // 次要文字色
                muted: "var(--color-text-muted)" // 弱化文字色
            },

            //主要背景颜色
            backgroundColor: {
                primary: "var(--color-bg-primary)", // 主题背景色
                secondary: "var(--color-bg-secondary)", // 次要背景色
                accent: "var(--color-bg-accent)" // 强调背景色
            },

            //主要字号
            fontSize: {
                base: ["16px", "1.5"], // 基础字号 (16px)
                lg: ["20px", "1.75"], // 大字号 (20px)
                xl: ["24px", "2"] // 超大字号 (24px，可作为主题字号)
            },

            // 4. 定义CSS变量（可选，但推荐）
            colors: {
                // 定义颜色变量
                primary: {
                    DEFAULT: "#3B82F6" // 主题色
                    // light: "#93C5FD", // 浅色变体
                    // dark: "#1D4ED8" // 深色变体
                },
                secondary: {
                    DEFAULT: "#10B981" // 次要色
                    // light: "#6EE7B7",
                    // dark: "#047857"
                },
                accent: {
                    DEFAULT: "#F59E0B" // 强调色
                    // light: "#FCD34D",
                    // dark: "#D97706"
                }
            },
            // 宽度
            width: Array.from({ length: 1000 }).reduce((map: any, _, index) => {
                map[index] = `${index * 4}px`;
                return map;
            }, {}),
            // 高度
            height: Array.from({ length: 1000 }).reduce((map: any, _, index) => {
                map[index] = `${index * 4}px`;
                return map;
            }, {})
        }
    },
    variants: {},
    plugins: []
};
